<template>
  <div>
    <el-card
      style="width: 100%"
      header="产品信息">
      <el-tabs
        v-if="categoryList.length > 0"
        @tab-click="tabClickAction"
        v-model="activeName">
        <el-tab-pane
          v-for="(category, category_index) in categoryList"
          :key="category_index"
          :label="category.category_name"
          :name="category.id.toString()">
          <el-row
            :gutter="32"
            v-loading="loading">
            <el-col
              :span="4"
              v-for="(product, p_index) in productListData"
              :key="p_index">
              <div class="product-box">
                <div style="font-size:17px;font-weight:bold;color:#606266">{{ product.product_name }}</div>
                <div style="font-size:14px;;color:#606266;padding:5px 0;">{{ product.product_no }}</div>
                <div>
                  <el-button
                    v-if="userProductListData.find( el => el.product_id == product.id )"
                    type="text"
                    @click="gotoMenu(product.component)">
                    立即使用
                  </el-button>
                </div>
                <div class="product-badge-success" v-if="userProductListData.find( el => el.product_id == product.id )">
                  <div class="product-badge-inner-success">已开通</div>
                </div>
                <div class="product-badge-fail" v-else>
                  <div class="product-badge-inner-fail">未开通</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { getProductCategory, getList } from '@/api/product';
import { getUserProductList } from '@/api/user';
export default {
  name: 'productInfo',
  data() {
    return {
      categoryList: [],
      activeName: '',
      productListData: [],
      loading: false,
      userProductListData:[]
    };
  },
  created() {
    this.getUserProductAction()
    this.getProductCategoryList();
  },
  methods: {
    getProductCategoryList() {
      getProductCategory({ page: 1, limit: 99, where: { pid: 0 } }).then(res => {
        this.$set(this, 'categoryList', res.data.data);
        this.getProductList(this.categoryList[0].id);
        this.$set(this, 'activeName', this.categoryList[0].id.toString());
      });
    },
    tabClickAction(val) {
      this.getProductList(val.name);
    },
    getProductList(categoryId) {
      this.$set(this, 'loading', true);
      getList({ page: 1, limit: 99, where: { base_category_id: categoryId } })
        .then(res => {
          res.data.data.forEach(item => {
            let componentName = item.component.split('/');
            componentName.shift();
            item.component = componentName.join('/');
          });
          this.$set(this, 'productListData', res.data.data);
        })
        .finally(() => {
          this.$set(this, 'loading', false);
        });
    },
    gotoMenu(path) {
      this.$router.push({
        path: path,
      });
    },
    getUserProductAction(){
      getUserProductList({ where:{user_id: this.$store.state.user.info.id}, page: 1, limit:9999}).then(res=>{
        this.$set( this, 'userProductListData', res.data.data )
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.product-box {
  background: rgb(242, 246, 252);
  height: 100px;
  margin: 10px 0 !important;
  border-radius: 4px 4px 4px 4px !important;
  padding: 15px;
  color: #606266;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
    sans-serif;
  font-size: 16px;
  position: relative;
}
.product-badge-success {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #67C23A;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.product-badge-inner-success {
  border: 1px solid #67C23A;
  border-radius: 50%;
  margin: 3px 0 0 3px;
  width: 42px;
  height: 42px;
  font-size: 12px;
  text-align: center;
  line-height: 42px;
  transform: rotate(45deg);
  color: #67C23A;
}
.product-badge-fail {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #909399;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.product-badge-inner-fail {
  border: 1px solid #909399;
  border-radius: 50%;
  margin: 3px 0 0 3px;
  width: 42px;
  height: 42px;
  font-size: 12px;
  text-align: center;
  line-height: 42px;
  transform: rotate(45deg);
  color: #909399;
}
</style>
